<template>
	<view class="">
		<view class="back ">
			<image class="backimg" :src="baseUrl + '/static/icon/left_jt.png'" mode="aspectFill" @click="goBack">
			</image>
		</view>
		<view class="top">
			<image
				src="https://images.fudiemall.com/storage/default/20250628/redtop7951620fe8a4f5e16836d773b98faa4a76d3f3ca.png"
				mode="aspectFill"></image>
		</view>
		<view class="main">
			<view class="maintop">
				<image class="headimg" :src="info.user.avatar" mode="aspectFill"></image>
				<view class="name">
					{{info.name}}
				</view>
				<image class="tag" v-if="info.type_red==1"
					src="https://images.fudiemall.com/storage/default/20250627/pin06b91c8d9ca48e37e4191523462c1d5d4aee193c.png"
					mode="aspectFill"></image>
			</view>
			<view class="content">
				{{info.remark}}
			</view>
			<view class="bot">
				还有{{info.rob_number}}/{{info.number}}个红包
			</view>
		</view>
		<view class="lists">
			<view class="listsitem" v-for="item in info.record">
				<view class="sss">
					<image class="headimg1" :src="item.user.avatar" mode="aspectFill"></image>
					<view class="listsitems">
						<view style="display: flex;justify-content: flex-start;align-items: center;">
							<view class="name">
								{{item.user.nickname}}
							</view>
							<image class="tagd" v-if="item.is_newer==1"
								src="https://images.fudiemall.com/storage/default/20250628/xinfen7a3c9488ee2050a9274e02fc0f325f3b9f6e7c5c.png"
								mode="aspectFill"></image>
						</view>
						<view class="time">
							{{item.create_time}}
						</view>
					</view>
				</view>
				<view class="ssssss">
					<view class="moneywrap">
						<image class="tag4"
							src="https://images.fudiemall.com/storage/default/20250628/heimore6016662051141b8a04669e79e196ccaee3c51fa4.png"
							mode="aspectFill"></image>
						<text>{{item.more_amount}}</text>
					</view>
					<image v-if="item.is_best==1" class="shouqi"
						src="https://images.fudiemall.com/storage/default/20250630/shouqizuijiac0f7c466688ed3a35da1629711635b283feb0e8b.png"
						mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="empty3">

		</view>
		<view class="empty3">

		</view>
		<u-overlay :show="tipShow" @click="tipShow = false">
			<view class="boxsd">
				<image
					src="https://images.fudiemall.com/storage/default/20250628/top22236de326257299fc226ce5c1391ef276ebdcd6.png"
					mode="aspectFill"></image>
			</view>
		</u-overlay>
		<view class="btnwrap" v-if="info.give_out_type==2">
			<view class="btn1" v-if="iswxflag" @click="tipShow=true">
				发到微信群或朋友圈
			</view>
		
			
			
			<view class="btn1" @click="copy">
				复制该红包链接
			</view>
			<view class="tipss">
				复制后可通过社交软件粘贴发给好友
			</view>
		</view>
	</view>
</template>

<script>
	import wx from 'weixin-js-sdk';
	import {
		detail
	} from '../../api/red';
	import {
		wxConfig
	} from "../../api/other.js"
	import {
		envflag
	} from '../../utils/request.js';
	export default {
		data() {
			return {
				tipShow: false,
				id: "",
				info: {
					user: {

					}
				},
				iswxflag: false,
				baseUrl: this.$imageBaseUrl,
			}
		},
		onLoad(e) {

			this.id = e.id
			this.getEnv()
			this.getdetail()

		},

		methods: {
	
			copy() {
				uni.setClipboardData({
					data: this.fullPath,
					success: function() {
						uni.$u.toast("复制成功")
					}
				})
			},
			getwxconfig() {
				wxConfig({

				}).then(res => {
					wx.config({
						debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名
						jsApiList: ['updateAppMessageShareData',
							'updateTimelineShareData'
						] // 必填，需要使用的 JS 接口列表
					});
					wx.ready(() => {
							this.setShareConfig();
					});
				})
			},
			setShareConfig() {
				// 分享到朋友圈
				wx.updateTimelineShareData({
					title: "来自" + this.info.name,
					link: this.fullPath,
					desc: '福叠猫专属红包', // 分享描述
					imgUrl: "https://images.fudiemall.com/storage/default/20250702/redbao1a246e11b2abb9a7da6595f60a9ff6789830e9053.png",
					success() {
						console.log('分享到朋友圈成功');
					},
					cancel() {

						console.log('取消分享到朋友圈');
					}
				});

				// 分享给好友
				wx.updateAppMessageShareData({
					title: "来自" + this.info.name,
					link: this.fullPath,
					imgUrl: "https://images.fudiemall.com/storage/default/20250702/redbao1a246e11b2abb9a7da6595f60a9ff6789830e9053.png",
					desc: '福叠猫专属红包', // 分享描述
					success() {
						console.log('分享给好友成功');
					},
					cancel() {
						console.log('取消分享给好友');
					}
				});
			},
			getEnv() {
				let isfrom;
				// 小程序环境判断
				// #ifdef MP-WEIXIN
				try {
					const systemInfo = uni.getSystemInfoSync();
					console.log(systemInfo)
					if (systemInfo.platform === 'devtools') {
						isfrom = '浏览器开发者工具';
					} else if (systemInfo.app) {
						const app = systemInfo.app.toLowerCase();
						if (app.includes('alipay')) {
							isfrom = '支付宝小程序';
						} else if (app.includes('micromessenger')) {
							isfrom = '微信小程序';
						}
					}
				} catch (error) {
					// 如果 uni.getSystemInfoSync 报错，说明可能不是小程序环境
				}
				// #endif
				// #ifdef H5
				if (!isfrom) {
					const ua = navigator.userAgent.toLowerCase();
					if (ua.match(/Alipay/i)) {
						isfrom = '支付宝浏览器';
					} else if (ua.match(/MicroMessenger/i)) {
						isfrom = '微信内置浏览器';
						this.iswxflag = true
					

					} else {
						isfrom = '普通浏览器';
					}
				}
				// #endif

				// H5环境判断


				// 跳转逻辑
				if (isfrom === "微信小程序" || isfrom === "微信内置浏览器") {
					// 这里可以添加微信相关的跳转逻辑
				} else {

				}
				return isfrom;
			},
			async getdetail() {
				
					const res = await detail({
						red_id: this.id
					});
					this.info = res.data;

					if (envflag) {
						this.fullPath =
							`https://h5.fudiemall.com/#/pageUser/redEnvelope/openRedEnvelope?id=${this.id}&invite_code=${this.info.user.invite_code}`;
					} else {
						this.fullPath =
							`https://h5-test.fudiemall.com/#/pageUser/redEnvelope/openRedEnvelope?id=${this.id}&invite_code=${this.info.user.invite_code}`;
					}
					if(this.iswxflag){
						await this.getwxconfig()
					}
					// 确保数据加载完成后再检查环境
			
			},
			goBack() {
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
		},
		// #ifdef MP-ALIPAY || MP-WEIXIN
		onShareAppMessage() {
			return {
				title: "来自" + this.info.name, // 标题
				desc: '福叠猫专属红包', // 描述
				path: `pageUser/redEnvelope/openRedEnvelope?id=${this.id}&invite_code=${this.info.user.invite_code}`, // 分享的小程序页面
				bgImgUrl: "https://images.fudiemall.com/storage/default/20250703/yuncai0072bd3fa2c235f970a68f739e6baa285483bcfa.png",
				imageUrl: "https://images.fudiemall.com/storage/default/20250703/yuncai0072bd3fa2c235f970a68f739e6baa285483bcfa.png",
				success(res) {
					console.log('success', res);
				},
				fail(res) {
					console.log('fail', res)
				},
			}
		}
		// #endif

	}
</script>

<style lang="scss">
	.top {
		width: 750rpx;
		height: 208rpx;

		>image {
			width: 750rpx;
			height: 208rpx;
		}
	}

	.lists {
		width: 690rpx;
		margin: 0 auto;
	}

	.listsitem {}

	.headimg1 {
		width: 92rpx;
		height: 92rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}

	.bot {
		width: 690rpx;
		margin: 0 auto;
		border-bottom: 2rpx solid #E5E5E5;
		padding-bottom: 20rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		margin-top: 40rpx;
	}

	.content {
		width: 750rpx;
		text-align: center;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		margin-top: 28rpx;
	}

	.tag {
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;

	}

	.main {
		width: 750rpx;
		max-height: 288rpx;

	}

	.maintop {
		width: 750rpx;
		margin-top: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.headimg {
		width: 56rpx;
		height: 56rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.listsitem {
		display: flex;
		justify-content: space-between;
		// height: 174rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #E5E5E5;
	}

	.listsitems {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.sss {
		display: flex;
	}

	.name {
		max-width: 300rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		margin-left: 24rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tagd {
		width: 56rpx;
		height: 30rpx;
		margin-left: 10rpx;

	}

	.moneywrap {
		width: 200rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		>text {
			font-weight: 500;
			font-size: 30rpx;
			color: #3D3D3D;
			margin-left: 10rpx;
		}
	}

	.tag4 {
		width: 24rpx;
		height: 24rpx;
	}

	.time {
		font-weight: 400;
		font-size: 30rpx;
		color: #999999;
		margin-left: 24rpx;
	}

	.btnwrap {
		width: 750rpx;
		height: 270rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.btn1 {
		width: 530rpx;
		height: 80rpx;
		background: #FF5959;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		text-align: center;
		line-height: 80rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.tipss {
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
	}

	.boxsd {
		width: 750rpx;
		display: flex;
		height: 100vh;

		>image {
			margin: 0 auto;
			width: 560rpx;
			height: 764rpx;
		}
	}

	.shouqi {
		width: 158rpx;
		height: 44rpx;
		margin-left: 20rpx;
	}

	.ssssss {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.backimg {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;

	}

	.shareimg {
		position: absolute;
		top: 50%;
		right: 40rpx;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;
	}

	.back {
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 88rpx;
		/* #endif */
		/* #ifdef H5 */
		top: 40rpx;
		/* #endif */
		left: 20rpx;
		width: 100%;
		height: 88rpx;
		z-index: 999;
	}
</style>